<template>
    <div>
        <van-nav-bar title="公文发文"/>
        <van-cell-group style="margin: 5px 0 15px 0">
            <van-field label="发布人：" v-model="formData.name" :border="borderStatus"/>

            <van-field label="发布部门：" v-model="formData.department" :border="borderStatus"/>

            <van-field label="职务：" v-model="formData.duty" :border="borderStatus"/>
        </van-cell-group>

        <van-cell-group>
            <van-field
                    readonly
                    v-model="leaveCategoryText"
                    label="公文类别："
                    placeholder="请选择公文类别"
                    :border="borderStatus"
                    @click="selectStatus=true">
            </van-field>

            <van-field
                    readonly
                    v-model="leaveStartDateStr"
                    label="开始时间："
                    placeholder="请选择发布开始时间"
                    :border="borderStatus"
                    @click="openDatePicker(1)">
            </van-field>

            <van-field
                    readonly
                    v-model="leaveEndDateStr"
                    label="结束时间："
                    placeholder="请选择发布结束时间"
                    :border="borderStatus"
                    @click="openDatePicker(2)">
            </van-field>


            <van-field label="发布时长：" v-model="leaveDay" placeholder="请输入发布天数" :border="borderStatus"/>

            <van-field :class="'cust-textarea74'" label="发布事由：" type="textarea" placeholder="请输入发布事由" autosize />
        </van-cell-group>

        <van-cell-group style="margin-top: 15px">
            <van-field label="联系方式：" placeholder="请输入联系方式" :border="borderStatus"/>
        </van-cell-group>

        <van-picker v-show="selectStatus" show-toolbar :columns="leaveCategoryList" @cancel="selectStatus=false" @confirm="onSelectCategory" />
        <van-datetime-picker v-if="datePickerStatus" type="datetime" :min-date="minDate" @confirm="onDatePicker" @cancel="datePickerStatus=false"/>

        <div style="width: 100%;text-align: center;padding-top:15px ">
            <van-button plain block type="info" style="width: 99%;margin: 0 auto">提  交</van-button>
        </div>

    </div>
</template>

<script>
    const leave_category_list = ['内部发文','通知','公报','公告','其他']

    import { formatDate } from '@/util/util'

    export default {
        name: "dispatch",
        data(){
            return {
                borderStatus:true,
                datePickerStatus:false,
                datePickerFlag:'',
                minDate:new Date(),
                leaveCategoryList:leave_category_list,
                selectStatus:false,

                leaveCategoryText:'',
                leaveStartDate:'',
                leaveEndDate:'',

                formData:{
                    name:'张三',
                    duty:'开发经理',
                    department:'维普科技',
                    leaveCategory:'',

                }
            }
        },
        created(){
            console.log(new Date().getTime())
        },
        computed:{
            leaveStartDateStr(){
                if(!this.leaveStartDate){
                    return ''
                }
                return formatDate(this.leaveStartDate.getTime(),"yyyy-MM-dd hh:mm:ss");
            },
            leaveEndDateStr(){
                if(!this.leaveEndDate){
                    return ''
                }
                return formatDate(this.leaveEndDate.getTime(),"yyyy-MM-dd hh:mm:ss");
            },
            leaveDay(){
                if(!this.leaveEndDate || !this.leaveEndDate){
                    return '0天'
                }
                //时间差的毫秒数
                let dateDiff = this.leaveEndDate.getTime() - this.leaveStartDate.getTime();
                //计算出相差天数
                return Math.floor(dateDiff / (24 * 3600 * 1000))+'天';
            }
        },
        methods:{
            onSelectCategory(value){
                this.leaveCategoryText = value;
                this.formData.leaveCategory = leave_category_list.indexOf(value)+1
                this.selectStatus = false
            },
            openDatePicker(flag){
                this.datePickerStatus = true;
                this.datePickerFlag = flag;
            },
            onDatePicker(date){
                if(this.datePickerFlag===1){
                    this.leaveStartDate = date
                }else if(this.datePickerFlag===2){
                    this.leaveEndDate = date
                }
                this.datePickerStatus=false
            }

        }
    }
</script>

<style>
    .cust-textarea74 textarea{height:72px !important;}
</style>

